<template>
  <div class="upload-part">
    <div class="part-title">视频描述</div>
    <textarea
      class="video-dsp"
      :value="videoContent"
      placeholder="例如：现场玩红包雨小游戏（最多150字）"
      :maxlength="150"
      :show-confirm-bar="false"
      :auto-height="true"
      @input.stop="changeContent"
      @blur="changeContent"
    ></textarea>
    <span class="conten-len">{{ videoContent.length + '/150' }}</span>
  </div>
</template>

<script setup lang="ts">
const videoContent = ref('');
const emits = defineEmits(['inputContent'])
const changeContent = (e: any) => {
  videoContent.value = e.detail.value;
  emits('inputContent', {
    detail: {
      value: videoContent.value
    }
  })
};
</script>

<style lang="scss" scoped>
.upload-part {
  width: 100%;
  height: auto;
  margin-bottom: 31rpx;
  position: relative;
  .mag {
    margin-bottom: 8rpx;
  }
  .part-title {
    width: 100%;
    color: #ff2459;
    font-size: 29rpx;
  }
  .sub-title {
    color: rgba(0, 0, 0, 0.4);
    font-size: 25rpx;
  }

  .video-dsp {
    width: 100%;
    min-height: 346rpx;
    /* height: auto; */
    margin-top: 23rpx;
    padding: 23rpx;
    padding-bottom: 58rpx;
    box-sizing: border-box;
    border: 2rpx solid #e8e8e8;
    border-radius: 15rpx;
    word-break: break-all;
    font-size: 29rpx;
  }

  .up-video-container {
    width: 100%;
    height: 396rpx;
    margin-top: 23rpx;
    position: relative;

    .upload-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8rpx;
    }

    .delete-icon {
      width: 38rpx;
      height: 38rpx;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(50%) translateY(-50%);
    }
  }

  .add-img {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;

    .img-item {
      width: 212rpx;
      height: 212rpx;
      margin-right: 19rpx;
      margin-top: 23rpx;
      position: relative;
      .up-img {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
      .delete-icon {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        transform: translateY(-50%) translateX(50%);
      }
    }
  }

  .conten-len {
    position: absolute;
    bottom: 19rpx;
    right: 19rpx;
    color: rgba(0, 0, 0, 0.4);
    font-size: 25rpx;
  }

  .total-award {
    color: #27ae60;
    font-size: 29rpx;
    position: absolute;
    right: 0;
    top: 0;
  }

  .label-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    .label-item {
      margin-top: 23rpx;
      margin-right: 15rpx;
      padding: 12rpx 31rpx;
      box-sizing: border-box;
      background-color: #f6f6f6;
      border-radius: 83rpx;
      color: rgba(0, 0, 0, 0.6);
      font-size: 23rpx;
    }
    .activeLabel {
      color: #ffffff;
      background-color: #ff2459;
    }
  }
}
.add {
  width: 212rpx;
  height: 212rpx;
  margin-top: 23rpx;
  border-radius: 12rpx;
  background-color: #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;

  .add-icon {
    width: 46rpx;
    height: 46rpx;
  }
}
</style>
